<template>
	<view class="content">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/fh.png"></image>
				</view>
				<view class="w-250 h-100 w-row-center w-wz-conts font-36">安全管理</view>
				<view class="wh-80">
		
				</view>
			</view>
		</view>
		<view class="bwh-100"></view>
		<!-- 头部导航结束 -->

		<view class="wh-30"></view>
		<view class="w-710 w-row-end-justify-around-align">
			<view class="w-330 h-150 w-bj-cont w-bor-12 w-row-center" @click="editorPassword()">
				<svg t="1683438291388" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="4141" width="25" height="25">
					<path
						d="M870.144 346.944h-55.68v-18.816c0-166.784-135.68-302.464-302.464-302.464s-302.464 135.68-302.464 302.464v18.816h-55.68c-42.24 0-76.8 34.56-76.8 76.8V947.2c0 42.24 34.56 76.8 76.8 76.8h716.288c42.24 0 76.8-34.56 76.8-76.8V423.744c0-42.24-34.56-76.8-76.8-76.8z m-278.592 287.36h-43.392v109.568c30.208 11.52 51.712 40.64 51.712 74.88 0 44.224-35.904 80.128-80.192 80.128s-80.192-35.904-80.192-80.128c0-34.24 21.504-63.36 51.712-74.88V503.36c0-15.68 12.8-28.48 28.48-28.48s28.48 12.8 28.48 28.48v73.984h43.392c15.68 0 28.48 12.8 28.48 28.48s-12.8 28.48-28.48 28.48z m158.912-287.36H273.536v-18.816c0-131.456 106.944-238.464 238.464-238.464s238.464 107.008 238.464 238.464v18.816z"
						fill="#ccb581" p-id="4142"></path>
				</svg>
				<text class="font-38b w-wz-conts m-left-6">修改密码</text>
			</view>
			<view class="w-330 h-150 w-bj-cont w-bor-12 w-row-center" @click="bindPhone()">
				<svg t="1683438596511" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="14363" width="25" height="25">
					<path
						d="M792.576 0q19.456 0 36.352 7.168t29.696 19.968 19.968 29.696 7.168 36.352l0 837.632q0 38.912-27.136 66.048t-66.048 27.136l-559.104 0q-38.912 0-66.048-27.136t-27.136-66.048l0-837.632q0-19.456 7.168-36.352t19.968-29.696 29.696-19.968 36.352-7.168l559.104 0zM419.84 93.184l185.344 0 0-47.104-185.344 0 0 47.104zM512 976.896q19.456 0 36.352-7.168t29.696-19.968 19.968-29.696 7.168-36.352-7.168-36.352-19.968-29.184-29.696-19.456-36.352-7.168q-38.912 0-65.536 26.624t-26.624 65.536 26.624 66.048 65.536 27.136zM792.576 139.264l-559.104 0 0 605.184 559.104 0 0-605.184z"
						p-id="14364" fill="#ccb581"></path>
				</svg>
				<text class="font-38b w-wz-conts m-left-6">绑定手机</text>
			</view>
		</view>


		<!-- 修改密码 -->
		<uni-popup style="z-index: 999;" ref="phone_popup" type="bottom">


			<view class="w-600 h-750 w-bj-white w-bor-25 w-col-center">
				<view class="h-80 font-36b">修改密码</view>
				<view class="w-450 h-100">
					<input type="text" class="phone_input" v-model="UserInfo.nickname" disabled />
				</view>
				<view class="w-450 h-100">
					<input type="text" class="phone_input" v-model="password" placeholder="输入新密码" />
				</view>
				<view class="w-450 h-100">
					<input type="text" class="phone_input" v-model="passwords" placeholder="确认新密码" />
				</view>
				<view class="w-450 h-100 w-relative">
					<input type="text" class="phone_input" v-model="code" placeholder="验证码" />
					<view class="w-200  h-80 w-row-center " style="position: absolute; top:2rpx; right: 2rpx;">
						<view class="font-28 w-wz-red m-left-10" v-if="count"> 重新获取{{count < 10 ? '0'+count :count}}秒
						</view>
						<view v-else>
							<view class="font-28b w-wz-blue" v-if="isPass" @click="getMessage('pass')">获取验证码</view>
							<view class="font-28b w-wz-black9" v-else>获取验证码</view>
						</view>
					</view>
				</view>
				<view class="wh-30"></view>
				<view class="w-450 h-80">
					<button class="w-bor-10 w-bj-gere w-wz-white w-row-center" @click="submitPassword()">
						<view class="w-row-align">
							<text class="font-32 m-left-6 m-top-6">确定修改密码</text>
						</view>
					</button>
				</view>
				<view class="wh-40"></view>
			</view>
		</uni-popup>


		<!-- 绑定手机号 -->
		<uni-popup style="z-index: 999;" ref="bindphone_popup" type="bottom">


			<view class="w-600 h-500 w-bj-white w-bor-25 w-col-center">
				<view class="h-80 font-36b">绑定手机号</view>
				<view class="w-450 h-100">
					<input type="number" class="phone_input" v-model="phone" placeholder="输入手机号" />
				</view>

				<view class="w-450 h-100 w-relative">
					<input type="number" class="phone_input" v-model="code" placeholder="验证码" />
					<view class="w-200  h-80 w-row-center " style="position: absolute; top:2rpx; right: 2rpx;">
						<view class="font-28 w-wz-red m-left-10" v-if="count"> 重新获取{{count < 10 ? '0'+count :count}}秒
						</view>
						<view v-else>
							<view class="font-28b w-wz-blue" v-if="isPhone" @click="getMessage('bind')">获取验证码</view>
							<view class="font-28b w-wz-black9" v-else>获取验证码</view>
						</view>
					</view>
				</view>
				<view class="wh-30"></view>
				<view class="w-450 h-80">
					<button class="w-bor-10 w-bj-gere w-wz-white w-row-center" @click="submitPhone()">
						<view class="w-row-align">
							<text class="font-32 m-left-6 m-top-6">确定绑定</text>
						</view>
					</button>
				</view>
				<view class="wh-40"></view>
			</view>
		</uni-popup>

	</view>

</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				phone: null,
				password: '',
				passwords: '',
				timer: null, //设置计时器,
				count: "",
				UserInfo: {},
				code: ''
			}
		},

		onLoad() {
			this.UserInfo = uni.getStorageSync('UserInfo');
			if (this.UserInfo.uid && this.UserInfo.token) {

			} else {
				return uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},

		computed: {
			isPass() {
				if (this.password && this.passwords) {
					return true
				} else {
					return false
				}
			},
			isPhone() {
				if (this.isMobile(this.phone)) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {


            // 绑定手机
			bindPhone() {

				this.$nextTick(() => {
					this.$refs.bindphone_popup.open('center')
				})

			},
			// 绑定手机
			submitPhone() {
			
				if (!this.isMobile(this.phone)) {
					return uni.showToast({
						title: '手机号码格式错误',
						duration: 1000,
						icon: 'none'
					});
				}
			
				$H.post('/app_user_securemsg', {
					type: 'bind',
					code: this.code,
					phone: this.phone
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
						
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
			
				})
			},

			// 修改密码
			editorPassword() {

				if (!this.isMobile(this.UserInfo.phone)) {
					return uni.showToast({
						title: '请先绑定手机号码',
						duration: 1000,
						icon: 'none'
					});
				}
				this.$nextTick(() => {
					this.$refs.phone_popup.open('center')
				})
			},
            // 修改密码  
			submitPassword() {

				if (this.code.length != 4) {
					return uni.showToast({
						title: '验证码错误',
						duration: 1000,
						icon: 'none'
					});
				}

				if (this.password == '') {
					return uni.showToast({
						title: '密码不能为空',
						duration: 1000,
						icon: 'none'
					});
				}

				if (this.password != this.passwords) {
					return uni.showToast({
						title: '两次输入密码不一致',
						duration: 1000,
						icon: 'none'
					});
				}

				$H.post('/app_user_securemsg', {
					type: 'edit',
					code: this.code,
					password: this.password
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
						uni.clearStorageSync()
						return uni.reLaunch({
							url: '/pages/index/index'
						});
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}

				})
			},

			getMessage(type) {

				$H.post('/app_user_get_message', {
					type: type,
					phone:this.phone
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.getPhoneCode()
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}

				})
			},


			getPhoneCode() {
				let TIME_COUNT = 60;
				if (!this.timer) {
					this.showCode = true
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.showCode = false
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},

			isMobile(mobile) {
				return /^1[3-9]\d{9}$/.test(mobile)
			},
			
			


		}
	}
</script>

<style>
	.phone_input {
		padding: 20rpx;
		border: solid 2rpx #dedede;
		border-radius: 10rpx;
	}
</style>
